<template>
	<view class="p30 bg-fff">
		<u-search v-model="keyword" placeholder="输入客户姓名/手机号查询" :showAction="false"></u-search>
		<view class="bg-fff w90 h90 radius pf z-index2 right30 bottom100 flex-col col-center row-center" @click="$refs.modal.open()"
			style="box-shadow: 0rpx 1.2rpx 10rpx 0rpx rgba(0, 0, 0,.3);">
			<view>新建</view>
			<view>客户</view>
		</view>
		<view class="flex border-b pb20 tc mt30">
			<view class="flex1">
				<view class="">
					<text>客户数量</text>
					<u-icon name="question-circle" color="#999" @click="show.customer=!show.customer"></u-icon>
				</view>
				<view class="fs38 fw-w">{{data.customer_num||0}}</view>
			</view>
			<view class="w2 h60 bg-eee"></view>
			<view class="flex1">
				<view class="">
					<text>今日新增客户</text>
					<u-icon name="question-circle" color="#999" @click="show.today=!show.today"></u-icon>
				</view>
				<view class="fs38 fw-w">{{data.today_num||0}}</view>
			</view>
			<view class="w2 h60 bg-eee"></view>
			<view class="flex1">
				<view class="">
					<text>服务次数</text>
					<u-icon name="question-circle" color="#999" @click="show.service=!show.service"></u-icon>
				</view>
				<view class="fs38 fw-w">{{data.service_num||0}}</view>
			</view>
		</view>

		<view class="mt20 flex row-between">
			<view class="flex" @click="change('order_num',form.order_num)">
				<view class="mr10">总下单数</view>
				<sortImg :show="form.order_num"></sortImg>
			</view>
			<view class="flex" @click="change('service_num',form.service_num)">
				<view class="mr10">服务次数</view>
				<sortImg :show="form.service_num"></sortImg>
			</view>
			<view class="flex" @click="change('patient_num',form.patient_num)">
				<view class="mr10">就诊人数</view>
				<sortImg :show="form.patient_num"></sortImg>
			</view>
		</view>
		<view class="">
			<u-empty v-if="!list.length" marginTop="100"></u-empty>
			<view class="bg-f8f radius20 p20 mt20" v-for="(item,index) in list" :key="index"
				@click="$jump('/pages/my/client/info',{member_id:item.member_id||item.id})">
				<view class="flex">
					<u-avatar :src="item.avatar||''" size="60"></u-avatar>
					<view class="ml20 flex1 u-line-1">{{item.name}}</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="flex row-between mt20">
					<view class="">
						<text>总下单数</text>
						<text class="fs30 fw-w ml10">{{item.order_num}}</text>
					</view>
					<view class="">
						<text>服务次数</text>
						<text class="fs30 fw-w ml10">{{item.service_num}}</text>
					</view>
					<view class="">
						<text>就诊人数</text>
						<text class="fs30 fw-w ml10">{{item.patient_num}}</text>
					</view>
				</view>
				<view class="color-999 fs26 mt20">最后下单时间： {{item.pay_time}}</view>
			</view>
		</view>
		<u-popup v-model="show.customer" mode="center" width="600" closeable borderRadius="20">
			<view class="p40">
				<view class="">客户数量</view>
				<view class="pt30 color-666">统计服务过的客户总数量，（只显示自己服务过的客户）</view>
			</view>
		</u-popup>
		<u-popup v-model="show.today" mode="center" width="600" closeable borderRadius="20">
			<view class="p40">
				<view class="">今日新增客户</view>
				<view class="pt30 color-666">统计今日服务过的客户总数量，（只显示自己服务过的客户）</view>
			</view>
		</u-popup>
		<u-popup v-model="show.service" mode="center" width="600" closeable borderRadius="20">
			<view class="p40">
				<view class="">服务次数</view>
				<view class="pt30 color-666">统计服务完成的总次数，（只统计自己服务的订单）</view>
			</view>
		</u-popup>
		<modal ref="modal" title="新建客户" placeholder="请输入客户手机号" maxlength="11" @confirm="searchCustomer"></modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: {
					customer: false,
					today: false,
					service: false,
				},
				data: '',
				page: 1,
				list: [],
				keyword: '',
				form: {
					order_num: '',
					service_num: '',
					patient_num: '',
				}
			};
		},
		watch: {
			keyword() {
				this.$u.debounce(this.getList, 800)
			},
			'form.order_num'() {
				this.$u.debounce(this.getList, 500)
			},
			'form.service_num'() {
				this.$u.debounce(this.getList, 500)
			},
			'form.patient_num'() {
				this.$u.debounce(this.getList, 500)
			},
		},
		onLoad() {
			this.getList()
		},
		onShow() {
			this.getData()
		},
		onReachBottom() {
			this.getList('down')
		},
		methods: {
			change(key, value) {
				this.form = {
					order_num: '',
					service_num: '',
					patient_num: '',
				}
				let text = value == 'asc' ? 'desc' : 'asc'
				this.form[key] = text
			},
			searchCustomer(mobile) {
				if (!/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(mobile)) return this.$msg('手机号不正确')
				this.$request('/master/customer/searchCustomer', {
					mobile
				}).then(res => {
					this.$refs.modal.cancel()
					if (res.data?.id) {
						this.$jump('/pages/my/client/addOrder', {
							member_id: res.data.id
						})
					} else {
						this.$jump('/pages/my/client/creation', {
							mobile
						})
					}
				})
			},
			getData() {
				this.$request('/master/customer/customerManage').then(res => {
					this.data = res.data
				})
			},
			getList(e) {
				e == 'down' ? this.page++ : this.page = 1
				let params = {
					...this.$params,
					page: this.page,
					keyword: this.keyword,
					...this.form,
				}
				this.$request('/master/customer/customerList', params).then(res => {
					let list = res.data.data
					e == 'down' ? this.list.push(...list) : this.list = list
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
</style>